<template>
  <div>
    <MySearch :data="searchData" :defaulValue="defaulValue" @onSeatch="onSeatch" />
    <Grid>
      <template #toolbar-tools> </template>
    </Grid>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MySearch from '#/components/MySearch/index.vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
const searchData = ref({
  top: {
    type: "INPUT",
    placeholder: "请输入订单编号查询",
    name: "s0",
  },
  list: [
    {
      type: "SELECT",
      title: "媒体",
      placeholder: "请选择",
      name: "s1",
      options: [
        { value: 1, label: "头条", },
        { value: 2, label: "快手", },
      ]
    },
    {
      type: "INPUT",
      title: "广告主账户",
      placeholder: "请输入",
      name: "s2",
    },
    {
      type: "INPUT",
      title: "广告计划",
      placeholder: "请输入",
      name: "s3",
    },
    {
      type: "SELECT",
      title: "订单状态",
      placeholder: "请选择",
      name: "s4",
      options: [
        { value: 1, label: "待成团", },
        { value: 2, label: "已成团", },
        { value: 3, label: "确认收货", },
        { value: 4, label: "审核成功", },
        { value: 5, label: "审核失败/已处罚", },
        { value: 6, label: "已结算", },

      ]
    },
    {
      type: "INPUT",
      title: "商品",
      placeholder: "请输入",
      name: "s6",
    },
    {
      type: "SELECT",
      title: "存在风险",
      placeholder: "请选择",
      name: "s7",
      options: [
        { value: 1, label: "是", },
        { value: 2, label: "否", },
      ]
    },
    {
      type: "SELECT",
      title: "订单类型",
      placeholder: "请选择",
      name: "s8",
      options: [
        { value: 1, label: "当天下单", },
        { value: 1, label: "回流", },
        { value: 1, label: "未知", },
      ]
    },
    {
      type: "SELECT",
      title: "回传",
      placeholder: "请选择",
      name: "s9",
      options: [
        { value: 1, label: "是", },
        { value: 2, label: "否", },
      ]
    },
    {
      type: "SELECT",
      title: "主推商品",
      placeholder: "请选择",
      name: "s10",
      options: [
        { value: 1, label: "是", },
        { value: 2, label: "否", },
      ]
    },
    {
      type: "INPUT",
      title: "店铺名称",
      placeholder: "请输入",
      name: "s11",
    },
    {
      type: "GROUP",
      prepend: {
        type: "SELECT",
        placeholder: "请选择",
        name: "s12",
        options: [
          { value: 1, label: "素材名称", },
          { value: 2, label: "素材ID", },
        ],
      },
      append: {
        type: "INPUT",
        placeholder: "请输入",
        name: "s122",
      }
    },
    {
      type: "SELECT",
      title: "版位",
      placeholder: "请选择",
      name: "s13",
      options: [
        { value: 1, label: "今天头条", },
        { value: 2, label: "西瓜视频", },
        { value: 3, label: "火山小视频", },
        { value: 4, label: "抖音", },
        { value: 5, label: "番茄小说", },
        { value: 6, label: "穿山甲", },
        { value: 7, label: "通投广告位", },
        { value: 8, label: "搜索", },
      ]
    },
    {
      type: "SELECT",
      title: "成交方式",
      placeholder: "请选择",
      name: "s14",
      options: [
        { value: 1, label: "直达链接", },
        { value: 2, label: "商品链接", },
        { value: 3, label: "落地页链接", },
        { value: 4, label: "微信小程序", },
      ]
    },
    {
      type: "SELECT",
      title: "归因触点",
      placeholder: "请选择",
      name: "s15",
      options: [
        { value: 1, label: "曝光", },
        { value: 2, label: "有效播放+点击", },
        { value: 3, label: "联盟点击", },
      ]
    },
    {
      type: "SELECT",
      title: "订单来源",
      placeholder: "请选择",
      name: "s115",
      options: [
        { value: 1, label: "京东", },
        { value: 2, label: "京豆PRO", },
      ]
    },
    {
      type: "GROUP",
      width: 390,
      prepend: {
        type: "SELECT",
        placeholder: "请选择",
        name: "s16",
        options: [
          { value: 1, label: "订单创建时间", },
          { value: 2, label: "成团时间", },
          { value: 3, label: "结算时间", },
          { value: 4, label: "点击时间", },
          { value: 5, label: "回传时间", },
          { value: 6, label: "退款时间", },
          { value: 7, label: "支付时间", },
        ],
      },
      append: {
        type: "DATETIMERANGE",
        name: "s17",
      }
    },
  ]
})

const gridOptions = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '商品', type: 'c1', fixed: "left", width: 400 },
    { title: '回传方式', type: 'c3', width: 100 },
    { title: '盈亏成本', type: 'c4', width: 100 },
    { title: '盈亏ROI', type: 'c5', width: 100 },
    { title: '推广结束时间', type: 'c6', width: 100 },
    { title: '备用商品', type: 'c7', width: 100 },
    { title: '自研落地页', type: 'c8', width: 100 },
    { title: '拼团金额', type: 'c9', width: 100 },
    { title: '在投账户', type: 'c10', width: 100 },
    { title: '商品链接', type: 'c11', width: 100 },
    { title: '链接域名', type: 'c12', width: 100 },
    { title: '店铺', type: 'c13', width: 100 },
    { title: '类目', type: 'c14', width: 100 },
    { title: '运营人员', type: 'c15', width: 100 },
    { title: '备注', type: 'c16', width: 100 },
    { title: '创建人', type: 'c17', width: 100 },
    { title: '创建时间', type: 'c18', width: 100 },
  ],
  exportConfig: {},
  // height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await getExampleTableApi({
          page: page.currentPage,
          pageSize: page.pageSize,
        });
      },
    },
  },
  toolbarConfig: {
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});



const onSeatch = () => {
  // 
}

</script>


<style lang="scss" scoped></style>
